<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>授权确认 - OAuth2</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .confirm-container {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 30px;
            width: 450px;
        }
        h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }
        .app-info {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        .app-logo {
            width: 50px;
            height: 50px;
            background-color: #4285f4;
            border-radius: 10px;
            margin-right: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: bold;
        }
        .app-name {
            font-size: 18px;
            font-weight: bold;
        }
        .scope-list {
            margin-bottom: 20px;
        }
        .scope-item {
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
        .scope-item:last-child {
            border-bottom: none;
        }
        .scope-name {
            font-weight: bold;
            margin-bottom: 5px;
        }
        .scope-description {
            color: #666;
            font-size: 14px;
        }
        .buttons {
            display: flex;
            justify-content: space-between;
        }
        .btn {
            padding: 10px 20px;
            border-radius: 4px;
            font-size: 14px;
            cursor: pointer;
            border: none;
        }
        .btn-approve {
            background-color: #4285f4;
            color: white;
        }
        .btn-approve:hover {
            background-color: #357ae8;
        }
        .btn-cancel {
            background-color: #f5f5f5;
            color: #333;
            border: 1px solid #ddd;
        }
        .btn-cancel:hover {
            background-color: #eee;
        }
        .error {
            color: #f44336;
            font-size: 14px;
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="confirm-container">
        <h2>应用授权</h2>
        <div class="app-info">
            <div class="app-logo" th:text="${client != null ? client.clientName.substring(0,1).toUpperCase() : 'A'}">A</div>
            <div class="app-name" th:text="${client != null ? client.clientName : '应用'}">应用</div>
        </div>
        
        <p>该应用请求获取以下权限：</p>
        
        <div class="scope-list">
            <div class="scope-item" th:each="s : ${#strings.arraySplit(scope, ',')}">
                <div class="scope-name" th:text="${s}">用户信息</div>
                <div class="scope-description" th:switch="${s}">
                    <span th:case="'userinfo'">获取您的基本信息（用户名、邮箱等）</span>
                    <span th:case="'profile'">访问您的个人资料</span>
                    <span th:case="'email'">访问您的邮箱地址</span>
                    <span th:case="*">访问您的其他信息</span>
                </div>
            </div>
        </div>
        
        <div class="error" id="errorMsg"></div>
        
        <div class="buttons">
            <button class="btn btn-cancel" onclick="cancelAuth()">取消</button>
            <button class="btn btn-approve" onclick="approveAuth()">授权</button>
        </div>
    </div>

    <script th:inline="javascript">
        // 获取请求参数
        const clientId = [[${param.client_id}]];
        const scope = [[${param.scope}]];
        const redirectUri = [[${param.redirect_uri}]];
        const state = [[${param.state}]];
        const responseType = [[${param.response_type}]];
        
        function cancelAuth() {
            // 重定向到客户端，带上错误信息
            const errorRedirect = redirectUri + 
                (redirectUri.includes('?') ? '&' : '?') + 
                'error=access_denied' + 
                (state ? '&state=' + encodeURIComponent(state) : '');
            
            window.location.href = errorRedirect;
        }
        
        function approveAuth() {
            const errorMsg = document.getElementById('errorMsg');
            
            // 发送确认授权请求
            fetch('/oauth2/doConfirm', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: new URLSearchParams({
                    'client_id': clientId,
                    'scope': scope,
                    'redirect_uri': redirectUri,
                    'state': state,
                    'response_type': responseType
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.code === 200) {
                    // 授权成功，跳转到回调地址
                    window.location.href = data.data;
                } else {
                    // 显示错误信息
                    errorMsg.textContent = data.message || '授权失败，请稍后再试';
                }
            })
            .catch(error => {
                console.error('授权失败:', error);
                errorMsg.textContent = '网络错误，请稍后再试';
            });
        }
    </script>
</body>
</html> 